import { Outlet, NavLink, useNavigation } from "react-router-dom";
import './index.css'

const menuList = ['', 'hooks', 'closure']

export default function Root() {
  const navigation = useNavigation();
  return (
    <>
      <div id="sidebar">
        <h1>React Vite Demo</h1>
        <nav>
          <ul>
            {menuList.map((path) => (
              <li>
                <NavLink
                  to={path || '/'}
                  className={({ isActive, isPending }) =>
                    isActive
                      ? "active"
                      : isPending
                        ? "pending"
                        : ""
                  }
                >
                  {path || 'home'}
                </NavLink>
              </li>
            ))}

          </ul>
        </nav>
      </div>
      <div id="detail" className={
        navigation.state === "loading" ? "loading" : ""
      }>
        <Outlet />
      </div>
    </>
  );
}
